<template>
  <div id="category">
    <category-nav-bar/>
    <category-side-bar :category="category"/>
    <category-content :content-top="contentTop" :content-bottom="contentBottom"/>
  </div>
</template>

<script>

  import CategoryNavBar from "./childcomps/CategoryNavBar";
  import CategorySideBar from "./childcomps/CategorySideBar";
  import CategoryContent from "./childcomps/CategoryContent";

  import {getCateGory,getSubCateGory,getSubCateGoryDetail} from "@/network/category";
  import pubsub from 'pubsub-js'


  export default {
    name: "Category",
    components:{
      CategoryNavBar,
      CategorySideBar,
      CategoryContent,
    },
    data(){
      return {
        category:[], //左边分类数据（数组）
        contentTop:[], // 内容顶部数据(数组)
        contentBottom:[],//内容底部商品数据
        maitKey: 3627, //3627 是默认的内容区顶部展示代码
        miniWallkey:10062603,
        goodsType:['pop', 'new', 'sell'],
        currentType:'pop',
      }
    },
    created() {
      /**
       *调用请求数据的函数
       */
      // 1.获取左边导航栏数据
      this.getCateGory()
      // 2.获取内容区顶部数据
      this.getSubCateGory() //没点击左边标题时调用一次显示的内容，后面点击事件发回来时再在点击事件后调用一次
      // 3.获取内容区详情商品数据
      this.getSubCateGoryDetail('pop')
    },

    computed:{

    },
    mounted() {
      pubsub.subscribe('titleClick',  (msg,index) => {
        this.maitKey = this.category[index].maitKey
        this.miniWallkey = this.category[index].miniWallkey
        this.getSubCateGory()
        this.getSubCateGoryDetail()
      })
      pubsub.subscribe('tabClick', (msg, index) => {
        this.currentType = this.goodsType[index]
        this.getSubCateGoryDetail(this.currentType)
      })
    },
    methods:{
      /**
       *定义请求数据的函数
       */
      // 1.获取左边导航栏数据
      getCateGory(){
        getCateGory().then(res => {
          this.category = res.data.data.category.list
          // console.log(this.category);
        })
      },
      // 2.获内容区顶部分据
      getSubCateGory(){
        getSubCateGory(this.maitKey).then(res => {
          this.contentTop = res.data.data.list
          // console.log(res);
        })
      },
      // 3.获取内容区商品数据
      getSubCateGoryDetail(currentType){
        getSubCateGoryDetail(this.miniWallkey,currentType).then(res => {
          this.contentBottom = res.data
          // console.log(res);
        })
      },

      /**
       *事件响应监听方法
       */
    }
  }
</script>

<style scoped>

</style>